<template>
      <el-dialog
          :model-value="visible"
          title="新增"
          @close="dialogClose"
          width="40%"
    >
     <el-form :model="form" ref="formRef" :rules="formRules" label-width="100px">
        <el-form-item label="账号：" prop="username">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="角色：" prop="role">
           <el-radio-group v-model="form.role">
              <el-radio border :label='1' >管理员</el-radio>   <!-- label是字符串，:label是数字-->
              <el-radio border :label='2' >普通用户</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="密码：" prop="password">
          <el-input v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item label="姓名：" prop="first_name">
          <el-input v-model="form.first_name"></el-input>
        </el-form-item>
        <el-form-item label="年龄：" prop="age">
            <el-date-picker v-model="form.age" type="date" value-format="YYYY-MM-DD" placeholder="请选择日期">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="性别：" prop="sex">
           <el-radio-group v-model="form.sex">
              <el-radio border :label='1' >男</el-radio>   <!-- label是字符串，:label是数字-->
              <el-radio border :label='2' >女</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="邮箱：" prop="email">
          <el-input v-model="form.email" ></el-input>
        </el-form-item>
       <el-form-item label="手机号码：" prop="mobile">
          <el-input v-model="form.mobile" ></el-input>
        </el-form-item>
        <el-form-item label="状态：" prop="is_active">
           <el-radio-group v-model="form.is_active">
              <el-radio border :label='1' >启用</el-radio>   <!-- label是字符串，:label是数字-->
              <el-radio border :label='0' >禁用</el-radio>
            </el-radio-group>
        </el-form-item>
      </el-form>


      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogClose">取消</el-button>
          <el-button type="primary" @click="submit">确定</el-button>
        </span>
      </template>

  </el-dialog>
</template>

<script>
    export default {
        props: {
            visible: Boolean,
        },
        data() {
            return {
                form: {
                  username: '',
                  role: 1,
                  first_name: '',
                  password: '',
                  sex: 1,
                  age: '',
                  email: '',
                  mobile:'',
                  is_active: 1,
                  last_login: '',
                  date_joined: '',
                },
                formRules: {
                      username: [
                          {required: true, message: '请输入账号', trigger: 'blur'},
                          {min: 2, message: '账号长度应不小于2个字符', trigger: 'blur'},
                          {validator: function (rule, value, callback) {
                              // 效验英文
                              if(/[a-zA-Z]/.test(value) === false) {
                                callback(new Error('请输入英文名称'))
                              } else {
                                return callback();
                              }
                            }, trigger: 'blur'},
                      ],
                       password: [
                          {required: true, message: '请输入密码', trigger: 'blur'},
                          {min: 6, message: '密码长度应不小于6个字符', trigger: 'blur'},
                          {validator: function (rule, value, callback) {
                              if(/[a-zA-Z0-9]/.test(value) === false) {
                                callback(new Error('请输入数字、大小写字母'))
                              } else {
                                return callback();
                              }
                            }, trigger: 'blur'},
                       ],
                       first_name: [
                          {required: true, message: '请输入姓名', trigger: 'blur'},
                          {min: 2, message: '姓名长度应不小于2个字符', trigger: 'blur'},
                      ],
                       age: [
                          {required: true, message: '请输入年龄', trigger: 'blur'},
                          {validator: function (rule, value, callback) {
                              if(/[0-9]/.test(value) === false) {
                                callback(new Error('请输入数字'))
                              } else {
                                return callback();
                              }
                            }, trigger: 'blur'},
                       ],
                       email: [
                          {required: true, message: '请输入邮箱', trigger: 'blur'},
                          {min: 2, message: '邮箱长度应不小于2个字符', trigger: 'blur'},
                      ],
                },
            }
        },
        methods: {
          onRest(){
            this.$refs.formRef.resetFields();
          },
          dialogClose() {
            this.$emit('update:visible', false);  // 当对话框关闭，通过父组件更新为false
            this.onRest(); //重置表单
          },
          submit() {
            this.$refs.formRef.validate((valid) => {
              if (valid) {
                this.$http.post('/config/user/', this.form)
                  .then(res => {
                    if (res.data.code === 200){
                      this.$message.success('创建成功');
                      this.$parent.getData(); // 调用父组件方法，重新获取数据
                      this.dialogClose()  // 关闭窗口
                      this.onRest(); //重置表单
                    }
                  })
              } else {
                this.$message.error('格式错误！')
              }
            })
          },
        }
    }
</script>

<style scoped>

</style>